<template>
	<div class="gw-img-cover" v-if="getactivePic && pageName=='home'">
		<!--&& getactivePic[0]-->
		<div v-if="getactivePic" class="cupmask"></div>
		<!--&& getactivePic[0]-->
		<div v-show="twoshow" class="writediv">
			<!--  -->
			<img class="bigimg" v-if="getactivePic[0]" :src="getactivePic[0]" @click="jumpEventcup" />
			<i class="closeimgJen nj-shibai icon njfont" @click="closealate"></i>
		</div>
		<!--  -->
		<div v-show="!twoshow" class="writediv">
			<i class="closeimg nj-shibai icon njfont" @click="closecoupons"></i>
			<div class="bigdiv">
				<img src="static/image/givecoupons.png" />
				<div class="cupalate">
					<ul class="coupon_list">
						<!-- <li>
							<div class="account_money">

								<div class="usePlatspan usePlatspan3" style="overflow: hidden;padding: 0.30rem 0;border-radius: 0px;">
									<span style="display: table;height: 100%;"><span style="vertical-align: middle;display: table-cell;font-size: 0.45rem;color:#89b256;background-color:#e5f5ec;line-height:14px" title="商城体验">商城体验</span></span>
								</div>
								<div class="moneyclss" style="margin-left: 0.8rem;">
									<span class="unit">¥</span>
									<span>5</span><span class="unit">.65</span>
									<span class="unit">折</span>
								</div>
								<div style="margin-left: 1rem;" class="ljmoney">
									满5元使用
								</div>
							</div>
							<dl>
								<dt title="一张优惠券">一张优惠券一张优惠券</dt>
								<dd>商品券</dd>
								<p>有效期：8月1日-8月8日</p>
							</dl>
						</li> -->
						
						<li v-for="(val,index) in getactivePic[3]" :key="index">
							<div class="account_money">

								<div class="usePlatspan" :class="useplatcolor(val.couponDto.usePlatform)" style="overflow: hidden;padding: 0.30rem 0;border-radius: 0px;">
									<span style="display: table;height: 100%;"><span style="vertical-align: middle;display: table-cell;font-size: 0.45rem;color:#89b256;background-color:#e5f5ec;line-height:14px" :title="useterrace(val.couponDto.usePlatform)">{{useterrace(val.couponDto.usePlatform)}}</span></span>
								</div>


								<div class="moneyclss" style="margin-left: 0.8rem;">
									<span class="unit" v-if="val.couponDto.couponAmount">¥</span>
									<span>{{pricetwo(1,val.couponDto.couponAmount,val.couponDto.couponDiscount)}}</span><span class="unit" v-if="val.couponDto.couponAmount">{{pricetwo(2,val.couponDto.couponAmount,val.couponDto.couponDiscount)}}</span>
									<span class="unit" v-if="val.couponDto.couponDiscount">折</span>
								</div>
								<div style="margin-left: 1rem;" v-if="val.couponDto.useRestriction==1" class="ljmoney">
									满{{val.couponDto.fullElement}}使用
								</div>
							</div>
							<dl>
								<dt :title="val.couponDto.couponName">{{val.couponDto.couponName}}</dt>
								<dd>{{useRangefn(val)}}</dd>
								<p v-if="val.availableStartTime">有效期：{{val.availableStartTime}}-{{val.availableEndTime}}</p>
							</dl>
						</li>
					</ul>
				</div>
			</div>
			<!-- <i class="closeimg nj-shibai icon njfont" @click="closecoupons"></i> -->
			<div><span @click="closecoupons" class="closeAccept">立刻收下</span></div>
		</div>

	</div>
</template>

<script>
	import { mapGetters, mapMutations } from "vuex";
	import { getPageNameOrVirtualPageName } from "../../utils/getPageName";
	export default {
		data() {
			return {
				advRouter: "",
				twoshow: true
			}
		},
		computed: {
			...mapGetters('xxy', [
				"getactivePic",
				"getarrpopupnum"
			]),
			...mapGetters('wxh', [
				"login",
				"sessionId",
				"userInfo"
			]),
			pageName() {
				return getPageNameOrVirtualPageName();
			},
		},
		methods: {
			...mapMutations('xxy', [
				"setpopupVisible",
				"setarrpopupnum"
			]),
			jumpEventcup() {
				if(this.getactivePic[1]) {
					this.setpopupVisible(false)
					this.advRouter = this.getactivePic[1]
					this.$router.push({
						path: this.advRouter
					})
				}
			},
			getnum1() {
				if(this.getarrpopupnum.indexOf(false) > 0) {
					this.setpopupVisible(false)
				}
			},
			getnum2() {
				var advImg = JSON.parse(localStorage.getItem("AdPopoutImg"))
				var advLink = JSON.parse(localStorage.getItem("AdPopoutLink"))
				var phoneNumber = JSON.parse(localStorage.getItem("phoneNumber"))
				if(localStorage.getItem('phoneNumberArray')) {
					phoneNumberArray = JSON.parse(localStorage.getItem("phoneNumberArray"))
				} else {
					var phoneNumberArray = []
				}
				if(advImg !== this.getactivePic[0] || advLink !== this.getactivePic[1]) {
					this.setarrpopupnum([false]);
					this.setpopupVisible(true);
					phoneNumberArray = [];
				} else if(this.getarrpopupnum.length !== 0) {
					this.setpopupVisible(false)
					/*if(this.getactivePic[3] && this.getactivePic[3].length > 0) {
						this.setarrpopupnum([])
						this.setpopupVisible(true)
						this.twoshow = false
					}*/
				} else if(this.getarrpopupnum.length == 0 && advImg == this.getactivePic[0] || this.getarrpopupnum.length == 0 && advLink == this.getactivePic[1]) {
					for(var i = 0; i < phoneNumberArray.length; i++) {
						if(phoneNumberArray[i] == phoneNumber) {
							this.setpopupVisible(false)
							break
						}
					}
					/*if(this.getactivePic[3] && this.getactivePic[3].length > 0) {
						this.setarrpopupnum([])
						this.setpopupVisible(true)
						this.twoshow = false
					}*/
				}
				localStorage.setItem("AdPopoutImg", JSON.stringify(this.getactivePic[0]));
				localStorage.setItem("AdPopoutLink", JSON.stringify(this.getactivePic[1]));
				phoneNumberArray.push(phoneNumber);
				let phoneNumberArrayData = []
				for(var j = 0; j < phoneNumberArray.length; j++) {
					if(phoneNumberArrayData.indexOf(phoneNumberArray[j]) == -1) {
						phoneNumberArrayData.push(phoneNumberArray[j])
					}
				}
				localStorage.setItem("phoneNumberArray", JSON.stringify(phoneNumberArrayData));
			},
			nologin() {
				var sessionIdData = localStorage.getItem('sessionId')
				if(!this.sessionId && this.getactivePic[2] && this.getactivePic[2] == 1 || !sessionIdData && this.getactivePic[2] && this.getactivePic[2] == 1) {
					this.getnum1()
					localStorage.setItem("phoneNumber", "");
				}else if(this.sessionId && this.getactivePic[2] && this.getactivePic[2] == 2 || sessionIdData && this.getactivePic[2] && this.getactivePic[2] == 2) {
					if(this.sessionId && this.getactivePic[3] && this.getactivePic[3].length > 0 || sessionIdData && this.getactivePic[3] && this.getactivePic[3].length > 0) {
						this.twoshow = false
					}else if(this.userInfo) {
						if(localStorage.getItem("phoneNumber") !== this.userInfo.userid) {
							this.setarrpopupnum([]);
							localStorage.setItem("phoneNumber", this.userInfo.userid);
							this.getnum2()
						} else {
							localStorage.setItem("phoneNumber", this.userInfo.userid);
							this.getnum2()
						}
					}else {
						this.setpopupVisible(false)
					}
				}else if(this.sessionId && !this.getactivePic[0] && this.getactivePic[3] && this.getactivePic[3].length > 0 || sessionIdData && !this.getactivePic[0] && this.getactivePic[3] && this.getactivePic[3].length > 0) {
					this.twoshow = false
				}else {
					this.setpopupVisible(false)
				}
			},
			//关闭普通广告弹框
			closealate() {
				this.setpopupVisible(false);
				/*if(this.getactivePic[3] && this.getactivePic[3].length > 0) {
					this.setarrpopupnum([])
					this.setpopupVisible(true)
					this.twoshow = false
				}*/
			},
			//关闭优惠券弹框
			closecoupons() {
				if(!this.getactivePic[0]){
					this.setpopupVisible(false);
				}else{
					this.twoshow = true
					if(this.userInfo) {
						if(localStorage.getItem("phoneNumber") !== this.userInfo.userid) {
							this.setarrpopupnum([]);
							localStorage.setItem("phoneNumber", this.userInfo.userid);
							this.getnum2()
						} else {
							localStorage.setItem("phoneNumber", this.userInfo.userid);
							this.getnum2()
						}
					}
				}						
			},
			//时间截取
			getuseTime(val) {
				if(val) {
					return val.substring(5, 10).replace('-', '.');
				} else {
					return '--'
				}
			},
			//价格小数点后两位
			pricetwo(num, amount, discount) {
				if(num == 1 && discount) {
					return discount
				} else if(num == 1 && amount) {
					return String(amount).split('.')[0];

				} else if(num == 2 && amount) {
					if(String(amount).split('.')[1]) {
						return "." + String(amount).split('.')[1];
					} else {
						return ""
					}

				}
			},
			//优惠券使用范围
			useRangefn(item) {
				if(item.couponDto.useRange == 1) {
					if(item.couponDto.preferentialRange.promotionGoodsList.length == 1) {
						return item.couponDto.preferentialRange.promotionGoodsList[0].goodsName + "卡券"
					} else {
						return "商品类卡券"
					}
				} else if(item.couponDto.useRange == 2 || item.couponDto.useRange == 5) {
					if(item.couponDto.preferentialRange.promotionClassList.length == 1) {
						return item.couponDto.preferentialRange.promotionClassList[0].className + "卡券"
					} else {
						return "品类卡券"
					}
				} else if(item.couponDto.useRange == 3) {
					if(item.couponDto.preferentialRange.promotionBrandList.length == 1) {
						return item.couponDto.preferentialRange.promotionBrandList[0].brandName + "卡券"
					} else {
						return "品牌类卡券"
					}
				} else if(item.couponDto.useRange == 4) {
					return "全场卡券"
				}
			},
			//使用平台的获取
			useterrace(item) {
				var arr = item.split(',')
				if(arr.indexOf('wap') > -1 && arr.indexOf('offline') < 0) {
					return '商城专享'
				} else if(arr.indexOf('offline') > -1 && arr.indexOf('wap') < 0) {
					return '体验中心专享'
				} else if(arr.indexOf('wap') > -1 && arr.indexOf('offline') > -1) {
					return '商城体验中心通用'
				}
			},
			useplatcolor(item) {
				var arr = item.split(',')
				if(arr.indexOf('wap') > -1 && arr.indexOf('offline') < 0) {
					return 'usePlatspan1'
				} else if(arr.indexOf('offline') > -1 && arr.indexOf('wap') < 0) {
					return 'usePlatspan2'
				} else if(arr.indexOf('wap') > -1 && arr.indexOf('offline') > -1) {
					return 'usePlatspan3'
				}
			},
		},
		created() {
			this.nologin()
		},
		mounted() {

		},
	}
</script>

<style scoped>
	.gw-img-cover {
		position: absolute;
		/*left: 240px;*/
		top: 0px;
		height: 100%;
		width: 100%;
		z-index: 99999;
		touch-action: none;
	}
	
	.gw-img-cover .cupmask {
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.7;
	}
	.gw-img-cover .writediv  {
		position: absolute;
		width: 70%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		height: 50%;
	}
	
	.gw-img-cover .writediv .bigimg {
		max-width: 90%;
		max-height: 90%;
		margin: auto;
	}
	
	.gw-img-cover .writediv .bigdiv {
		position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		max-height: 15rem;
		max-width: 37.5rem;
	}
	
	.gw-img-cover .writediv .closeAccept {
 		position: absolute;
		left: 0;
		right: 0;
		bottom: -5px;
		margin: auto;
		color: #fff;
		font-size: 1rem;
		border: 1px solid #fff;
		border-radius: 1.6rem;
		width: 7.75rem;
		line-height: 1.3rem;

	}

	.gw-img-cover .writediv .closeimg {
		position: absolute;
		left: 0;
		right: -240px;
		top: -2px;
		margin: auto;
		color: #fff;
		font-size: 1rem;
		font-size: 1.5rem
	}
	.gw-img-cover .writediv .closeimgJen {
		position: absolute;
		left: 50%;
		bottom: 0;
		margin: auto;
		color: #fff;
		font-size: 1.5rem;
		margin-left: -15px;
	}
	/*优惠券样式*/
	
	.cupalate {
		max-height: 190px;
		overflow: auto;
		background-color: #F13E32;
		width: 100%;
		margin: 0 auto;
		border-bottom-left-radius: 0.3rem;
		border-bottom-right-radius: 0.3rem;
		border-top: 1rem solid #F13E32;
		border-bottom: 1rem solid #F13E32;
	}
	
	.cupalate .coupon_list {
		width: 90%;
		margin: 0rem auto;
		padding: 0rem;
	}
	
	.cupalate .coupon_list li {
		height: 3.3rem;
		background: #fff;
		margin-bottom: 0.75rem;
		border-radius:0.15rem;
	}
	
	.cupalate .coupon_list li .account_money {
		/*height: 0.5rem;*/
		line-height: 0.5rem;
		width: 4.5rem;
	}
	
	.cupalate .coupon_list li .account_money .ljmoney {
		color: #EF5423;
		font-size: 0.4rem;
		margin-top: 0.5rem;
	}
	.cupalate .coupon_list li .account_money .moneyclss span{
		font-size: 1.2rem;
	}
	.cupalate .coupon_list li .account_money .moneyclss .unit {
		font-size: 0.6rem;
		vertical-align:bottom;
	}
	
	.cupalate .usePlatspan {
		/*display: inline-block;
		font-size: 0.5rem;
		line-height: 1rem;
		padding: 0rem 0.25rem;*/
		border-radius: 0.5rem;
		font-size: 0.5rem;
		display: table-cell;
		line-height: 0.5rem;
		position: absolute;
		left: 0;
		top: 0;
		width: 0.8rem;
		height: 100%;
	}
	
	.cupalate .coupon_list li dl {
		text-align: left;
		white-space: normal;
	}
	
	.cupalate .coupon_list li dl dt {
		font-size: 0.6rem;
		line-height: 0.7rem;
		/* margin-top: 0.3rem; */
		columns: #333333;
		overflow: hidden;
		max-width: 6.0rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.cupalate .coupon_list li dl dd {
		color: #999999;
		font-size: 0.4rem;
		/* line-height: 0.7rem; */
		border: 1px solid #999;
		padding: 0.05rem 0.2rem;
		border-radius:0.15rem
	}
	
	.cupalate p {
		font-size: 0.45rem;
		line-height: 0.6rem;
		overflow: hidden;
		max-width: 6.5rem;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.cupalate .coupon_list li::after,
	.cupalate .coupon_list li::before {
		background-color: #F13E32;
		left: 4.2rem;
		border:none;
		width: 0.6rem;
		height: 0.6rem;
	}
	
	.cupalate .usePlatspan1 {
		color: #38B035;
		background-color: rgba(56, 176, 53, 0.1);
		/*商城用*/
	}
	
	.cupalate .usePlatspan2 {
		color: #FFCC00;
		background-color: rgba(255, 204, 0, 0.1);
		/*体验中心用*/
	}
	
	.cupalate .usePlatspan3 {
		color: #FF6600;
		background-color: rgba(255, 102, 0, 0.1);
		/*商城体验中心通用*/
	}
</style>